<template>
    <div class="container">
        <!-- 只有点击显示的时候才会加载对应的文件 -->
        <!-- spa首屏优化的解决办法之一 -->
        <button @click="show = !show">显示</button>

        <Suspense v-if="show">
            <template #default>
                <div class="components">
                    <UC></UC>
                </div>
            </template>
            <template #fallback>
                <div>加载中...</div>
            </template>
        </Suspense>
    </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
const show = ref<boolean>(false);
// 异步组件
const UC = defineAsyncComponent(() => import('@/components/useCount.vue'));
</script>
